<template>
  <!--为echarts准备一个具备大小的容器dom-->
<div>
  <el-button @click="setOption" type="primary">显示用户信用度查询</el-button>
    <div id="main" style="width: 1200px;height: 800px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import {
  PieChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

import {getDataList} from "@/api/pie";

echarts.use(
    [PieChart, CanvasRenderer]
);

export default {
  name: '',
  data() {
    return {
      dataList: [
        {name:"一星级",value:0},
        {name:"二星级",value:0},
        {name:"三星级",value:0},
        {name:"四星级",value:0},
        {name:"五星级",value:0},
      ]
    }
  },
  methods: {
    setOption(){
      this.$nextTick(function () {
        this.drawPie('main')
      })
    },
    loadPieList() {
      getDataList().then(res => {

        for (var i=0;i<res.data.length;i++){
          this.dataList[res.data[i].level].value = res.data[i].nums;
        }
      })
    },

    drawPie(id) {
      // console.log(this.dataList)
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: this.dataList,
            roseType: 'angle',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(0,0,0,0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgb(0,0,0,0.3)'
                }
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  },
  //调用
  created() {
    this.loadPieList();
  },
beforeMount() {
  this.loadPieList()

},


  mounted() {
    this.loadPieList()


  }
}
</script>
<style scoped>
* {
  margin: auto;
  padding-top: 0;
  list-style: none;
}
</style>
